Suomenkielinen tavutus WordPressiin

Tavutus on mukava lisä isommissa tekstikokonaisuuksissa. Tekstimassa näyttää miellyttävämmältä, kun rivit eivät ole kovin erimittaisia. Tavutuksen toteuttaminen käytännössä on ollut hivenen hankalaa, etenkin kun tekstirivien mitta voi olla kovin vaihteleva käyttäjän näytön leveydestä riippuen.

CSS tarjoaa nykyään helpon ratkaisun. Laittamalla elementille CSS-säännön hyphens: auto selaimen pitäisi automaattisesti tavuttaa teksti. Ongelmana on se, että eri kielissä tavutussäännöt ovat erilaisia ja valitettavasti ihan kaikki selaimet eivät vielä osaa suomenkielisiä tavutussääntöjä.

Mac-käyttäjät ovat onnellisemmassa asemassa kuin Windows-käyttäjät: Macissa käyttöjärjestelmä tarjoaa selainten käyttöön suomenkieliset tavutussäännöt ja useimpien selainten pitäisi osata tämäkin teksti tavuttaa oikein, jos käytössä on Mac. Firefox osaa tavutuksen paremmin kuin Chrome.

Koska tavutuksesta ei ole mitään haittaa, jos se ei toimi, kannattaakin oman sivuston tyylitiedostoihin lisätä sääntö hyphens: auto kaikkiin tekstielementteihin, jossa siitä voi olla hyötyä. Näin ainakin Firefox- ja Mac-käyttäjät saavat nauttia tavutetusta tekstistä.

Hyphenopoly

Hyphenopoly on javascriptillä tehty polyfill, joka lisää tavutustuen niihin selaimiin, jotka eivät osaa tavutusta muuten tehdä. Hyphenopolyn asentaminen WordPressiin vaatii hieman vaivannäköä, mutta on lopulta aika yksinkertainen juttu.

Hyphenopolyn voi asentaa esimerkiksi teeman alle näin:

1. Lataa Hyphenopolyn tiedostot GitHubista.
2. Tee teemasi hakemiston (/wp-content/themes/teeman_nimi/) sisään hakemisto hyphenopoly ja kopioi sinne tiedostot Hyphenopoly_Loader.js, Hyphenopoly.js ja hyphenopoly.module.js.
3. Tee tähän hakemistoon alihakemisto patterns ja kopioi sinne tiedosto fi.wasm (ja muut kielet, mikäli tarvitset muuta kuin suomenkielistä tavutusta).
4. Lisää teeman functions.php tiedostoon seuraava pätkä:

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_script(
			'hyphenopoly',
			'/wp-content/themes/teeman_nimi/hyphenopoly/Hyphenopoly_Loader.js',
			array(),
			'4.12.0',
			false
		);
		wp_add_inline_script(
			'hyphenopoly',
			'Hyphenopoly.config({
				require: {
					"fi": "pyyhkäisyelektronimikroskooppi",
				},
				paths: {
					patterndir: "/wp-content/themes/teeman_nimi/hyphenopoly/patterns/",
					maindir: "/wp-content/themes/teeman_nimi/hyphenopoly/",
				},
				setup: {
					selectors: {
						".container": {}
					}
				}
			});'
		);
	}
);

Vaihda kohtaan teeman_nimi (esiintyy koodissa kolme kertaa) oman teemasi hakemiston nimi. Jos käytät muita kieliä kuin suomea, lisää rivin "fi": "pyyhkäisyelektronimikroskooppi", jälkeen rivi jokaiselle kielelle. Rivillä pitää olla kielen koodi ja joku pitkä sana tällä kielellä.

Siinä kaikki – tämän jälkeen suomenkielisen tavutuksen pitäisi toimia kaikilla selaimilla. (Tälle sivustolle en ole jaksanut Hyphenopolya asentaa, jos ihmettelet. Kirjavinkit.fi:ssä pitäisi tulla tavutusta kaikille kävijöille.)

Syllable-hyphenator

Johannes Siipolan syllable-hyphenator on Syllable-kirjastoon perustuva tavutuslisäosa WordPressiin. Se tekee tavutuksen palvelimella lisäämällä sanoihin soft hyphen -välimerkkejä sopivasti. Tämä lisäys tapahtuu tekstin sivulle tulostamisen yhteydessä ja vaatii muutoksia sivupohjaan. Jos nämä sivupohjamuutokset vaikuttavat kätevältä ratkaisulta, tämä on oikein toimiva työkalu.

Oletusarvoisesti syllable-hyphenator on laiska tavuttaja ja lisää tavutuksen vasta vähintään 12 kirjainta pitkiin sanoihin. Alaraja on onneksi säädettävissä lyhyemmäksi. En ole tätä itse kokeillut, lähestymistapa kun sopii hieman nihkeästi omiin tarpeisiini. Itse määrittelen mieluummin CSS:n puolella, mitä tavutetaan, jolloin Hyphenopoly toimii notkeammin.